<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<c-header bgColor="bg-white">
			<view class="header" slot="header">
				<navigator open-type="navigateBack" :delta="1" hover-class="none" class="t-btn back-btn iconfont f-wb">&#xe63b;</navigator> 
				<view class="title">客户信息管理</view> 
			</view>
		</c-header> 
		<view class="h45">
			<view class="fix-wrap"> 
				<scroll-view scroll-x="true" class="scroll-tab">
					<view class="item" :class="{'active':item.id==params.dep_id}" v-for="(item,index) in deplist" :key="index" @click="changeDep(item.id)">
						<view class="name">{{item.name}}</view>
						<view v-show="item.id==params.dep_id" class="active-line"></view>
					</view> 
				</scroll-view> 
			</view>
		</view>
		<view class="body">
			<view class="tips">	{{tips}}</view>  
			
			<view class="list-wrap">
				
				<template v-if="loadingState.default">
					<c-loading :loadingState="loadingState"></c-loading>
				</template>
				
				<template v-else>
					<template v-if="list.length>0"> 			 
						<view class="item" v-for="(item,index) in list" :key="index">
							<navigator :url="'/package_kehu/add/add?page=detail&detail='+JSON.stringify(item)" hover-class="none" class="left">
								<view class="icon">{{item.label_name}}</view>
								<view class="info">
									<view class="name">{{item.realname}} {{item.telephone}}</view>
									<view class="params"> 
										<view class="text">{{item.address}}</view> 
									</view>
								</view>
							</navigator>
							<navigator v-if="!isDel" :url="'/package_kehu/add/add?page=edit&detail='+JSON.stringify(item)" hover-class="none" class="del-icon iconfont">&#xe75d;</navigator>
							<view v-else class="del-icon iconfont" @click="del(index)">&#xe74b;</view>
							
						</view>
						
						<c-loading :loadingState="loadingState"></c-loading>
					</template>
					<template v-else>
						<c-empty msg="暂无信息"></c-empty>
					</template>
					
				</template>
				 
				
			</view>
		</view>
		
		<c-footer>
			<view slot="content" class="bottom-footer">
				<view class="btn manage" @click="isDel=!isDel">管理</view>
				<navigator url="/package_kehu/add/add?page=add" hover-class="none" class="btn add">添加客户信息</navigator>	
			</view> 
		</c-footer> 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin:false,
				loadingState:{
					default:true,
					loading:false,
					completed:false
				},
				userInfo:uni.getStorageSync('userInfo'),
				systemInfo:getApp().globalData.systemInfo,
				isIphoneX:getApp().globalData.isIphoneX,
				params:{
					page:1,
					limit:20,
					keywords:'',
					dep_id:''
				},
				deplist:[],
				list:[],
				total:0,
				isDel:false,
				tips:''
				
			}
		},
		async onLoad(params) {
			this.getcrmcustomerdeplist();
			
			 
		},
		onShow() {
			 
		},
		onReachBottom(){
			if(this.loadingState.completed){ 
				this.params.page=1;
				return false
			}else{
				this.params.page++;
				this.getlist();	
			}	 
		},
		methods: {
			async getcrmcustomerdeplist(){
				let res=await this.$api.user_api.crmcustomerdeplist();    
				if(res.data.code==200){  
					this.deplist=res.data.data; 
					if(res.data.data.length>0){
						this.params.dep_id=res.data.data[0].id;
						this.tips='对接的各级经销商、零售商、种植大户、个体户或者个人等等；'
					}
					this.getlist();
				} 
			},  
			
			changeDep(id){
				console.log(id)
				if(this.params.dep_id==id) return;
				this.params.dep_id=id;
				this.params.page=1;
				this.list=[]; 
				this.loadingState={
					default:true,
					loading:false,
					completed:false
				}
				if(id==1){
					this.tips='对接的各级经销商、零售商、种植大户、个体户或者个人等等；'
				}
				if(id==2){
					this.tips='对接的各省、市、县、镇等政府部门人员名单信息。'
				}
				if(id==3){
					this.tips='公司采购的各种设备、仪器、耗材、原材料、零配件、服务等的供应商信息。'
				}
				if(id==4){
					this.tips='对接研究院、学院等科研机构相关的名单信息。'
				}
				if(id==5){
					this.tips='为电商运营而产生的推广服务、达人带货等名单信息。'
				}
				if(id==6){
					this.tips='为维护公司正常运营管理而必需的维修、维保、保洁、印刷、快递、运输等资源方信息。'
				}
				this.getlist();	
			},
			
			async getlist(){
				let res=await this.$api.user_api.crmcustomerlist({
					page:this.params.page,
					limit:this.params.limit,
					keywords:this.params.keywords,
					dep_id:this.params.dep_id
				});   
				if(res.data.code==200){   
					this.loadingState.default=false;
					this.loadingState.loading=true;
					res.data.data.list.forEach(item=>{
						item.label_name = item.realname.substring(item.realname.length - 2, item.realname.length); 
					}) 
					this.list=this.list.concat(res.data.data.list);	
					this.total=res.data.data.count;
					if(this.list.length==this.total){
						this.loadingState.loading=false;
						this.loadingState.completed=true;
					} 
				}  
			}, 
			 
			del(idx){
				let _this=this;
				let item=this.list[idx];
				uni.showModal({
					content:"确定删除吗？",
					mask:true,
					async success(res) {
						if(res.confirm){
							let res=await _this.$api.user_api.crmcustomerdel({
								id:item.id 
							});
							if(res.data.code==200){
								_this.list.splice(idx,1);
							}
						}
					}
				})	
			}
			
		},
		computed:{
			list_update(){
				return this.$store.state.kehu_list
			} 
		},
		watch:{
			list_update(n,o){
				if(n!=o){					
					this.params.page=1;
					this.list=[]; 
					this.loadingState={
						default:true,
						loading:false,
						completed:false
					}
					this.getlist();
				}
			} 
		}
		
	}
</script>

<style lang="less">
	.tips{
		margin:30rpx;
		font-size: 30rpx;	
	} 
	.bottom-footer{
		display:flex;
		justify-content: space-around;
		.btn{
			height:34px;
			line-height: 34px;
			width:45%;
			text-align: center;
			font-size: 30rpx;
			border: 2rpx solid #609FF7;
			border-radius: 10rpx;
		}
		.manage{
			background: #E7F1FE;
			color:#609FF7 ; 
		}
		.add{
			background: #609FF7;
			color:#fff ; 
		}
	}
	
	.list-wrap{
		padding-top:20rpx;
		.item{ 
			display: flex;
			align-items: center;
			padding:20rpx 30rpx;
			margin:0 20rpx 20rpx;
			background:#fff;
			border-radius: 15rpx;
			.left{
				display: flex;
				align-items: center;
				flex-grow: 2;
			}
			.icon{
				width:100rpx;
				height: 100rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
				background: #5A9BF7; 
				border-radius: 15rpx;
				font-size: 36rpx;
				text-align: center;
				line-height: 100rpx;
				color:#fff;
			}
			.info{
				flex-grow: 2;
				max-width: 70%;
				.name{
					margin-bottom: 10rpx;
					font-size: 32rpx;
				}
				.params{
					font-size:28rpx;
					color:#999;
					.text{
						margin-bottom:8rpx;
					}
				}
			}
			.del-icon{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: #E2EDFD;
				color: #61A0F7;
			}
		}
	}
</style>
